<template>
  <div class="wrapper" ref="wrapper"
  :style="{
    height:height,
    width:width,
    'align-self':'center',
    background:'white'
  }"
  >Charts</div>
</template>
<script lang="ts">
import * as echarts from 'echarts';
export default {
   name:"MyChart",
   props:['options',"height","width"],
   data(){
    return {
      chart: null
    }
   },
  mounted(){
    this.chart = echarts.init(this.$el);
    this.chart.setOption(this.options) 
  },
  watch:{
    "options":{
      handler(newValue){
        this.chart.setOption(newValue);
      }
    }
  }
}
</script>

<style lang="css" scoped>
</style>